<template>
	<view class="content">
		<image src="cloud://luthor.6c75-luthor-1259516754/test/背景.png" class="bgImage"></image>
		<text class="title">智慧化勘探</text>
		<view class="username">
			<image src="../../static/login/用户.png"></image>
			<input type="text" placeholder="请输入账号" v-model="username" />
		</view>
		<view class="password">
			<image src="../../static/login/密码.png"></image>
			<input type="text" placeholder="请输入密码" v-model="password" />
		</view>
		<view class="remember">
			<view class="remenberme">
				<checkbox-group @change="changeRm">
					<label>
						<checkbox value="rm" class="checkbox" :checked="checked" /><text>记住账号密码</text>
					</label>
				</checkbox-group>

			</view>
			<text class="forget">忘记密码？</text>
		</view>
		<button class="loginbtn" type="primary" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				checked: false,
			}
		},
		onLoad() {
			let that = this
			// 获取缓存账号密码
			uni.getStorage({
				key: "username",
				success(res) {
					that.username = res.data
				}
			})
			uni.getStorage({
				key: "password",
				success(res) {
					that.password = res.data
				}
			})
		},
		methods: {
			// 记住账号密码
			changeRm(e) {
				if (e.detail.value.length != 0) {
					uni.setStorage({
						key: "username",
						data: this.username
					})
					uni.setStorage({
						key: "password",
						data: this.password
					})
				}
			},
			// 登录方法
			login() {
				uni.showLoading({
					title: '登录中...'
				})
				let that = this;
				uni.request({
					url: this.baseUrl + 'sys/login',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password
					},
					success(res) {
						that.$store.commit('SET_USER_INFO', res.data)
						uni.switchTab({
							url: "../list/index/index"
						})
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		position: relative;

		// 背景图片
		.bgImage {
			width: 100%;
			height: 100%;
		}

		// 标题
		.title {
			color: white;
			font-size: 32px;
			position: absolute;
			top: 80px;
			left: 50%;
			transform: translateX(-50%);
		}

		// 登录信息
		.username {
			width: 70%;
			display: flex;
			border-bottom: 1px solid #ecf0f1;
			margin-bottom: 20px;
			padding-bottom: 8px;
			justify-content: space-between;
			position: absolute;
			top: 300px;
			left: 50%;
			transform: translateX(-50%);

			image {
				display: block;
				width: 18px;
				height: 18px;
			}

			input {
				color: #fff;
			}
		}

		.password {
			width: 70%;
			display: flex;
			border-bottom: 1px solid #ecf0f1;
			padding-bottom: 8px;
			margin-bottom: 20px;
			justify-content: space-between;
			position: absolute;
			top: 350px;
			left: 50%;
			transform: translateX(-50%);

			image {
				display: block;
				width: 18px;
				height: 18px;
			}

			input {
				color: #fff;
			}
		}

		.remember {
			color: #fff;
			width: 70%;
			display: flex;
			font-size: 0.8em;
			justify-content: space-between;
			position: absolute;
			top: 390px;
			left: 50%;
			transform: translateX(-50%);
		}

		.loginbtn {
			width: 280px;
			height: 44px;
			background: rgba(36, 187, 250, 1);
			border-radius: 22px;
			position: absolute;
			top: 455.5px;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>
